<template>
  <div class="duocang">
    <el-tooltip :open-delay="1000" placement="top">
      <div slot="content">
        <span class="content_title">设备编号：</span>
        {{ id }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ stateCode }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ xiaolv }}%
        <br />
        <span class="content_title">生产品种：</span>
        R30SAA-1
        <br />
        <span class="content_title">更新时间：{{ time }}</span>
      </div>
      <div class="duocang-content">
        <svg
          width="38px"
          height="14px"
          viewBox="0 0 38 14"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g
            id="大屏"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g id="首页" transform="translate(-1845.000000, -233.000000)">
              <g id="1右" transform="translate(1846.000000, 233.000000)">
                <path
                  d="M1,2 L29,2 L29,2 L29,13 L1,13 C0.44771525,13 6.76353751e-17,12.5522847 0,12 L0,3 C-6.76353751e-17,2.44771525 0.44771525,2 1,2 Z"
                  id="矩形备份-150"
                  stroke="#8FCDFA"
                  :style="bodyStyle"
                  transform="translate(14.500000, 7.500000) scale(1, -1) translate(-14.500000, -7.500000) "
                ></path>
                <path
                  d="M30,2 L36,2 L36,2 L36,13 L30,13 C29.4477153,13 29,12.5522847 29,12 L29,3 C29,2.44771525 29.4477153,2 30,2 Z"
                  id="矩形备份-149"
                  stroke="#8FCDFA"
                  :style="headStyle"
                  transform="translate(32.500000, 7.500000) scale(-1, 1) translate(-32.500000, -7.500000) "
                ></path>
                <polygon
                  id="矩形"
                  stroke="#8FCDFA"
                  stroke-width="0.5"
                  points="6 4 20.5 4 24 6 24 9 20.5 11 6 11"
                ></polygon>
                <line
                  x1="24.5"
                  y1="7.5"
                  x2="28.5"
                  y2="7.5"
                  id="直线"
                  stroke="#8FCDFA"
                  stroke-width="0.5"
                  stroke-linecap="square"
                ></line>
                <text
                  id="1"
                  font-family="PingFang-SC-Medium, PingFang SC"
                  font-size="10"
                  font-weight="400"
                  fill="#FFFFFF"
                >
                  <tspan x="12.46" y="11">{{ id }}</tspan>
                </text>
              </g>
            </g>
          </g>
        </svg>
        <div v-if="inline" class="duocang-xiaolv">
          {{ xiaolv + '%' }}
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mul } from '@/utils/caculate';
export default {
  name: 'kaimian',
  props: {
    data: Object,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ''
      },
      bodyStyle: {
        fill: ''
      },
      id: '',
      time: '',
      stateCode: '',
      xiaolv: 0
    };
  },

  computed: {
    newData() {
      return this.data;
    }
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler(val) {
        this.draw();
      }
    }
  },

  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      if (this.data) {
        this.id = this.data.devSn;
        this.stateCode = this.getHeadName(this.data.stateCode);
        this.xiaolv = mul(this.data.xiaolv, 100);
        this.time = this.data.time;
        this.headStyle.fill = this.getHeadColor(this.data.stateCode);
        this.bodyStyle.fill = this.getBodyColor(this.data.xiaolv);
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44';
        //停止
        case 2:
          return '#888F93';
        //故障
        case 3:
          return '#6D000E';
        //满纱满桶
        case 4:
          return '#ECCD54';
        //通讯失败
        case 5:
          return '#EB4E27';
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '运行';
        //停止
        case 2:
          return '停止';
        //故障
        case 3:
          return '故障';
        //满纱满桶
        case 4:
          return '满纱满桶';
        //通讯失败
        case 5:
          return '通讯失败';
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100;
      if (stateCode >= 90) {
        return '#2D69C7';
      } else if (90 > stateCode && stateCode >= 80) {
        return '#ECCD54';
      } else if (80 > stateCode && stateCode > 70) {
        return '#ECCD54';
      } else if (stateCode <= 70) {
        return '#EB4E27';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cls-1,
.cls-3 {
  stroke: #82c4fa;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-2 {
  font-size: 40px;
  fill: #fff;
  font-family: 'Microsoft YaHei';
  font-weight: 700;
}

.cls-3 {
  fill: #519aff;
  fill-rule: evenodd;
}
.duocang-content {
  position: relative;
}
.duocang-xiaolv {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  transform: scale(0.6);
  position: absolute;
  white-space: nowrap;
  right: -34px;
  top: 0px;
  width: 32px;
  text-align: left;
}
</style>
